import React from "react"
import type { PlayerCategory } from "@/lib/types"
import { Trophy } from "lucide-react"
import ModeIcon from "./mode-icons"

interface TierBadgesProps {
  currentTiers: {
    category: PlayerCategory
    tier: string
  }[]
  retiredTiers: {
    category: PlayerCategory
    tier: string
  }[]
  category: PlayerCategory
  size?: "normal" | "large"
}

const categoryIcons: Record<string, { icon: React.JSX.Element; color: string }> = {
  overall: { icon: <Trophy className="h-4 w-4" />, color: "text-yellow-500" },
  combat: { icon: <ModeIcon category="combat" size={16} />, color: "text-gray-400" },
  crystal: { icon: <ModeIcon category="crystal" size={16} />, color: "text-purple-500" },
  heart: { icon: <ModeIcon category="heart" size={16} />, color: "text-red-400" },
  potion: { icon: <ModeIcon category="potion" size={16} />, color: "text-pink-400" },
  discord: { icon: <ModeIcon category="discord" size={16} />, color: "text-purple-400" },
  circle: { icon: <ModeIcon category="circle" size={16} />, color: "text-emerald-500" },
  sword: { icon: <ModeIcon category="sword" size={16} />, color: "text-blue-400" },
  axe: { icon: <ModeIcon category="axe" size={16} />, color: "text-blue-300" },
  hammer: { icon: <div className="w-4 h-4 bg-gray-400" />, color: "text-gray-400" },
}

export default function TierBadges({
  currentTiers = [],
  retiredTiers = [],
  category,
  size = "normal",
}: TierBadgesProps) {
  const badgeSize = size === "large" ? "h-10 w-10" : "h-6 w-6"
  const fontSize = size === "large" ? "text-sm" : "text-xs"

  // Ensure we're working with arrays
  const safeCurrentTiers = Array.isArray(currentTiers) ? currentTiers : []
  const safeRetiredTiers = Array.isArray(retiredTiers) ? retiredTiers : []

  const displayTiers =
    category === "overall"
      ? [...safeCurrentTiers, ...safeRetiredTiers]
      : safeCurrentTiers.filter((t) => t.category === category)

  return (
    <div className={`inline-flex flex-row flex-wrap ${category === 'overall' ? 'gap-1 tracking-tighter' : 'gap-3'}`}>
      {displayTiers.map((tier, index) => {
        const isRetired = safeRetiredTiers.some((rt) => rt.category === tier.category && rt.tier === tier.tier)

        // Safely access the category icon
        const iconData = categoryIcons[tier.category] || categoryIcons.overall

        return (
            <span
              key={`${tier.category}-${index}`}
              className={`text-sm font-medium ${
                category === 'overall' 
                  ? 'text-gray-100' 
                  : `
                    flex items-center justify-center rounded-full p-2
                    ${badgeSize} ${fontSize} font-medium
                    ${getTierColor(tier.tier, isRetired)}
                  `
              }`}
              title={`${tier.category.toUpperCase()} - ${tier.tier}`}
            >
              {getCategorySymbol(tier.category)}{tier.tier}
            </span>
        )
      })}
    </div>
  )
}

function getTierShape(tier: string): string {
  return tier.startsWith('HT') ? 'rounded-full' : 'rounded-lg'
}

function getTierStyle(tier: string): string {
  const baseStyle = tier.startsWith('HT') 
    ? 'min-w-[50px] bg-gradient-to-br from-blue-600/90 to-purple-600/90 shadow-sm px-2 py-1' 
    : 'min-w-[35px] bg-gray-800/80 hover:bg-gray-700/80 px-1.5 py-1.0';
  return `${baseStyle} ${tier.startsWith('HT') ? 'hover:shadow-purple-500/20' : 'hover:shadow-gray-500/10'}`;
}

function getTierColor(tier: string, isRetired: boolean): string {
  const baseColors =
    {
      HT1: "bg-yellow-500/20 text-yellow-200",
      LT1: "bg-yellow-600/20 text-yellow-300",
      HT2: "bg-blue-500/20 text-blue-200",
      LT2: "bg-blue-600/20 text-blue-300",
      HT3: "bg-orange-500/20 text-orange-200",
      LT3: "bg-orange-600/20 text-orange-300",
      HT4: "bg-purple-500/20 text-purple-200",
      LT4: "bg-purple-600/20 text-purple-300",
      HT5: "bg-red-500/20 text-red-200",
      LT5: "bg-red-600/20 text-red-300",
    }[tier] || "bg-gray-500/20 text-gray-200"

  return isRetired ? `${baseColors} opacity-50` : baseColors
}

function getCategorySymbol(category: PlayerCategory): string {
  const symbols: Record<PlayerCategory, string> = {
    combat: '🗡',
    crystal: '🔮',
    heart: '❤️',
    potion: '🧪',
    discord: '💬',
    circle: '⭕️',
    sword: '⚔️',
    axe: '🪓',
    hammer: '🔨',
    overall: '⭐️'
  }
  return symbols[category] || ''
}
